<template>
	<view>
		<view class="spectator-container">
			<view class="spectator-header">
				<!-- #ifdef MP-WEIXIN -->
				<!-- 微信小程序中不显示按钮 -->
				<!-- #endif -->

				<!-- #ifndef MP-WEIXIN -->
				<!-- 非微信小程序平台（包括iOS和Android）显示按钮 -->
				<view class="back-icon">
					<uni-icons type="left" size="25" @click="back()"></uni-icons>
				</view>
				<!-- #endif -->
				<view class="title">
					选择观演人
				</view>
			</view>
			<view class="spectator-content">
				<view class="spectator-box" v-for="(item, index) in displaySpectatorList" :key="index">
					<view class="spectator-card">
						<view class="spectator-list">
							<view class="spectator-item">
								<view class="spectator-item-left-content" @click="choose(item.id)">
									<uni-icons class="uncheckbox-icon" type="circle" color="#d3d3d3" size="25" v-show="!item.isSelected"
										></uni-icons>
									<uni-icons class="checkbox-icon" type="checkbox-filled" color="#ff2d2de2" size="25"
										v-show="item.isSelected" ></uni-icons>
								</view>
								<view class="spectator-item-mid-content" @click="choose(item.id)">
									<view class="spectator-item-name">
										{{item.spectatorName}}
									</view>
									<view class="spectator-item-id-row">
										<view class="spectator-item-id-type">
											{{item.spectatorIdCardType}}
										</view>
										<view class="spectator-item-id-number">
											{{item.displayIdCard}}
										</view>
									</view>
									<view class="spectator-item-phone">
										手机号：{{item.spectatorphone}}
									</view>
								</view>
								<!-- <view class="spectator-item-right-content">
									<view class="icon-box" @click="delSpectator(item.id)">
										删除
									</view>
								</view> -->
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="spectator-btn-box">
			<view class="select-spectator">
				还需选择<text>{{selectNum}}</text>/{{limitNum}}观演人
			</view>
			<view class="spectator-btn" @click="selectSpectator()">
				确认
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onBeforeMount,
		onMounted,
		onUnmounted,
		watch,
		watchEffect,
		computed
	} from 'vue';

	import {
		sharedState,
		updateState
	} from '@/common/store.js'
	import {
		maskIdCard
	} from '@/common/maskIdCard.js';
	import { onShow, onHide, onUnload, onLoad } from '@dcloudio/uni-app';
	/**
	 * 暂时性观演人测试data，待完善编辑观演人页面保存编辑功能后删除
	 */
	//选择人数
	let selectNum =ref(0);
	//选中的要传递给订单结算的观演人数组
  let selectSpectatorList =ref([]);
  let limitNum = ref(0);
	let spectatorList = ref({
		code: 200,
		msg: "success",
		data: {}
	})
	spectatorList.value.data.list = []; //初始化观演人列表
	
	//展示的观演人数组
	let displaySpectatorList = ref([]);

	// 切换选中状态
	const choose = (id) => {
	  const item = displaySpectatorList.value.find(item => item.id === id);
	  if (item) {
	    if (!item.isSelected && selectNum.value >= limitNum.value) {
	      // 如果已经达到最大选择数量，则不允许再选
	      uni.showToast({
	        title: '已达到最大选择人数',
	        icon: 'none'
	      });
	      return;
	    }
	    item.isSelected = !item.isSelected;
	    updateSelectNum();
	    if (item.isSelected) {
	      // 选中为 true，则存放入 selectSpectatorList 数组中
	      const selectitem = spectatorList.value.data.list.find(item => item.id === id);
	      selectSpectatorList.value.push(selectitem);
	    } else {
	      // 选中为 false，则从 selectSpectatorList 中删除
	      selectSpectatorList.value = selectSpectatorList.value.filter(item => item.id !== id);
	    }
	  }
	  console.log(selectSpectatorList.value);
	};
	//返回上一层页面
	let back = () => {
		uni.navigateBack({
			delta: 1
		})
	}
const updateSelectNum = () => {
  selectNum.value = displaySpectatorList.value.filter(item => item.isSelected).length;
};





// 确认选择
const selectSpectator = () => {
	console.log("selectSpectatorList：",selectSpectatorList.value);
	if(selectSpectatorList.value.length == 0){
		uni.showToast({
		  title: '请选择至少一位观演人',
		  icon: 'none'
		});
		return;
	}else{
		uni.setStorage({
		  key: 'selectSpectator',
		  data: selectSpectatorList.value,
		  success: function() {
		    console.log('数据存储成功');
		    uni.navigateTo({
		      url: '/pages/orderbilling/orderbilling'
		    });
		  },
		  fail: function(err) {
		    console.error('数据存储失败', err);
		  }
		});
	}
 
};


	onShow(() => {
		uni.getStorage({
			key: 'saveSpectator',
			success: function(res) {
				console.log('获取的数据:', res.data);
				spectatorList.value.data.list = res.data;
				console.log(spectatorList.value.data.list);
				spectatorList.value.data.list.forEach(item => {
					displaySpectatorList.value.push({
						...item,
						displayIdCard: maskIdCard(item.spectatorIdNumber),
						isSelected:false
					});
					updateSelectNum();
				});
			},
			fail: function(err) {
				console.error('获取数据失败', err);
			}
		});
		
		uni.getStorage({
			key: 'storage_key',
			success: function(res) {
				console.log('获取的数据:', res.data);
				limitNum.value = res.data.limitNum;
			},
			fail: function(err) {
				console.error('获取数据失败', err);
			}
		});
		
		 uni.getStorage({
		    key: 'getSelectSpectator',
		    success: function(res) {
		      console.log('获取的数据:', res.data);
		      if (res.data) {
		        res.data.forEach(selectedItem => {
		          const item = displaySpectatorList.value.find(item => item.id === selectedItem.id);
		          if (item) {
		            item.isSelected = true;
		            selectSpectatorList.value.push(item);
		          }
		        });
		        updateSelectNum();
		      }
		    },
		    fail: function(err) {
		      console.error('获取数据失败', err);
		    }
		  });
	})
</script>

<style lang="scss" scoped>
	.spectator-container {
		width: 100%;
		min-height: 100vh;
		height: auto;
		display: block;
		background: #f8f8fe;
		color: #333;

		.spectator-header {
			top: 0px;
			width: 100%;
			height: 50px;
			display: flex;
			position: fixed;
			z-index: 1000;
			background: #fff;
			box-sizing: border-box;
			text-align: center;
			justify-content: center;
			align-items: center;
			box-shadow: 0px 0px 4px 0px #d3d3d3;

			.title {
				position: absolute;
				line-height: 50px;
				font-size: 18px;
				z-index: 5;
				height: 50px;
			}

			.back-icon {
				z-index: 10;
				position: absolute;
				left: 10px;

			}
		}


		.spectator-content {
			width: 100%;
			height: auto;
			background: #f8f8fe;
			margin-top: 50px;
			float: left;
			padding: 0px 15px;
			box-sizing: border-box;

			.spectator-box {
				width: 100%;
				height: 110px;
				margin: 15px 0px;
				background: #fff;
				box-shadow: 0px 0px 6px 0px #ddd;
				border-radius: 5px;
			
				.spectator-item {
					width: 100%;
					height: 110px;
					box-sizing: border-box;
					padding: 10px 15px;
					
					.spectator-item-left-content {
						width: 30px;
						height: 90px;
						float: left;
						.uncheckbox-icon {
							line-height: 90px;
						}
						
						.checkbox-icon {
							line-height: 90px;
							}
						}
					
			
					.spectator-item-mid-content {
						width: calc(100% - 60px);
						height: 100%;
						float: left;
			
						.spectator-item-name {
							width: auto;
							height: 30px;
							line-height: 30px;
							font-size: 14px;
							font-weight: bold;
						}
			
						.spectator-item-id-row {
							width: auto;
							height: 30px;
							line-height: 30px;
							color: #999999;
							font-size: 12px;
			
							.spectator-item-id-type {
								width: auto;
								float: left;
							}
			
							.spectator-item-id-number {
								width: auto;
								float: left;
							}
							
							
						}
						.spectator-item-phone {
							width: auto;
							height: 30px;
							line-height: 30px;
							color: #999999;
							font-size: 12px;
						}
			
					}
			
					.spectator-item-right-content {
						width: auto;
						height: 60px;
						float: right;
			
						.icon-box {
							width: auto;
							height: 60px;
							float: right;
							box-sizing: border-box;
							padding: 35px 0px 5px 0px;
							font-size: 14px;
							color: #ff2d2de2;
							.icon-edit {
								width: 20px;
								height: 20px;
							}
						}
					}
			
				}
			}

			.spectator-box:last-child {
				margin-bottom: 100px;
			}


		}

	}

	.spectator-btn-box {
		width: 100%;
		height: 80px;
		background: #fff;
		box-sizing: border-box;
		padding: 20px 15px;
		position: fixed;
		bottom: 0px;
		box-shadow: 0px 0px 4px 0px #d3d3d3;
		
		.select-spectator {
			width: auto;
			height: 40px;
			float: left;
			font-size: 13px;
			line-height: 40px;
			color: #333;
			box-sizing: border-box;
			padding-left: 5px;
			
			text {
				color: #ff2d2de2;
			}
		}

		.spectator-btn {
			width: 40%;
			height: 40px;
			float: right;
			font-size: 14px;
			background: #ff2d2de2;
			color: #fff;
			border-radius: 4px;
			line-height: 40px;
			text-align: center;
		}
	}
</style>